<template>
	<view class="content">

		<!-- 顶部滚动幻灯 -->
		<view class="top-slider">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-photo-02.png" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<!-- <image src="../../static/04.png" mode="widthFix"></image> -->
					</view>
				</swiper-item>
			</swiper>
			<view class="wiper-item-info">
				<view class="item-info">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
				<view class="item-number"><text class="current-number">1</text>/100</view>
			</view>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" focus placeholder="点击搜索物品" />
		</view>
		<!-- 帖子排序 -->
		<view class="list-sort-bar posts-sort">
			<button class="sort-button selected">积分商城</button>
			<button class="sort-button">灰豆商城</button>
		</view>
		<!-- 商品列表 -->
		<view class="item-card-list">
			<view class="item-card sellout">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-bottom-bar">
					<view class="item-name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="item-price">
						积分：<text class="score-number">1.2w</text>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-bottom-bar">
					<view class="item-name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="item-price">
						积分：<text class="score-number">1.2w</text>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-bottom-bar">
					<view class="item-name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="item-price">
						<icon type="" class="imgIcon icon-bean"></icon>
						灰豆：<text class="bean-number">1.2w</text>
					</view>
				</view>
			</view>
			<view class="item-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-bottom-bar">
					<view class="item-name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="item-price">
						积分：<text class="score-number">1.2w</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block half"></view>
		<!-- 底栏 -->
		<view class="footBar foot-common-content">
			<view class="buttons-content-columns">
				<button class="full-btn btn-normal">积分：<text class="score-number">5353</text></button>
				<button class="full-btn btn-normal"><icon type="" class="imgIcon icon-bean"/>灰豆：<text class="bean-number">5353</text></button>
				<button class="full-btn btn-important">我的订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
	            indicatorDots: false,
	            autoplay: true,
	            interval: 2000,
	            duration: 500
	        }
	    },
	    methods: {
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        }
	    }
	}
</script>
